<template>
    <div class="financeManager">
        <el-row>
            <el-col :span="23">
                <el-button style="margin : 15px" size="small" type="info" @click="openDialog" >表格导入</el-button>
                <el-button style="margin : 15px" size="small" type="info" @click="downTemplate" >模板下载</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="23">
                <el-table :data="tableData" stripe style="width: 100%" v-loading.body="loading">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="userName" label="姓名" width="120" ></el-table-column>
                    <el-table-column prop="detail" label="详情" align="center" ></el-table-column>
                    <el-table-column prop="action" label="动作" align="center" ></el-table-column>
                    <el-table-column label="日期" align="center" >
                        <template slot-scope="scope">
                            <span>{{scope.row.createDate |formatDate }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="limit" :page-sizes="[10, 20, 30, 40]" layout="sizes, prev, pager, next" :total="count">
        </el-pagination>
        <el-dialog title="上传Excel表格" :visible.sync="excelShow" width="30%" :modal-append-to-body="false" >
            <el-date-picker  v-model="yearMonth" type="month" :editable='false' placeholder="选择日期" value-format="yyyy-MM"></el-date-picker>
            <form name="fileinfo" @submit.prevent="submit" style="margin-top : 20px">
                <div>
                    <input type='file' id="file" name="file"/>
                </div>
            </form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="excelShow = false">取 消</el-button>
                <el-button type="primary" @click="upload">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
<script>
let id = 1000;
export default {
    name: "financeManager",
    data() {
        return {
            count: 0,
            skip: 0,
            limit: 10,
            loading : false ,
            excelShow : false ,
            formData : {},
            tableData : [],
            yearMonth : ''
        };
    },
    methods: {
        handleCurrentChange: function(res) {
            if (res == 1)
                this.skip = 0;
            else
                this.skip = (res - 1) * this.limit
            this.initList();
        },
        handleSizeChange: function(res) {
            this.limit = res;
            this.initList();
        },
        downTemplate : function () {
            // window.location.href = 'http://192.168.10.26:8086/template.xlsx'
            window.location.href = 'http://dd.fxcz.net:9980/downTemplate/template.xlsx'
        },
        openDialog : function () {
            this.excelShow = true ;
        },
        initList : function () {
            this.loading = true ;
            this.$http.post('api/finance/getLogList',{skip: this.skip,limit: this.limit}).then( res=> {
                let result = res.data ;
                this.loading = false ;
                if(result.code == 100){
                    this.tableData = result.data ;
                    this.count = res.data.count;
                }
            })
        },
        upload: function() {
            if(!this.yearMonth){
                this.message('请选择日期','error')
                return;
            }
            let findFile = document.getElementById('file').value ;
            if(!findFile){
                this.message('请选择要上传的文件','error')
                return ;
            }
            let val = findFile.split('.');
            if(val[1] != 'xlsx'){
                this.message('请上传正确格式的文本','error')
                return ;
            }
            this.excelShow = false ;
            this.loading = true ;
            let form = document.getElementsByTagName("form")[0];
            let oData = new FormData(document.forms.namedItem("fileinfo"));
            let oReq = new XMLHttpRequest();
            //XMLHttpRequest 对象用于在后台与服务器交换数据。该对象的好处：
            //在不重新加载页面的情况下更新网页
            //在页面已加载后从服务器请求数据
            //在页面已加载后从服务器接收数据
            //在后台向服务器发送数据
            let this_ = this;
            oReq.open("POST","http://" + location.host + "/api/finance/importFile",true);
            // oReq.open("POST","http://dd.fxcz.net:9980/fx_month_form_pc/api/finance/importFile",true);
            oReq.setRequestHeader("authorization", localStorage.getItem('token'));
            oReq.setRequestHeader("month", this.yearMonth);
            oReq.onload = function() {
                if (oReq.status == 200) {
                    let result_ = oReq.response;
                    this_.message('上传成功','success') ; 
                    this_.initList();
                    form.reset();
                }
            };
            oReq.send(oData);
        },
        message: function(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        }
    },
    created: function() {
        this.initList();
    }
}
</script>
<style lang="css" scoped>
</style>